// 门诊护士
<template>
  <el-row>
    <el-col :span="24" class="section-option">
      <TopManu ></TopManu>
    </el-col>
    <el-col :span="24" class="clinicNurse-content">
      <el-col :span="7" class="clinicNurse-left" >
        <el-col :span="24" class="clinicNurse-left-tabs">
          <div @click='tabs = key' v-for="(item,key) in leftTabs" :key="key" :style="tabs==key?leftStyle:''">{{item}}</div>
        </el-col>
        <el-col :span="24" class="patient" style="paddingTop:10px;" v-show='tabs == 0 || tabs == 1'>
          <el-input placeholder="请输入姓名/门诊号/身份证号" v-model="leftValue">
            <el-button slot="append" icon="el-icon-search">
              查询
            </el-button>
          </el-input>
          <el-radio-group  style="marginTop:10px;" v-model="radio">
            <el-radio :label="1">个人</el-radio>
            <el-radio :label="2">按科室</el-radio>
            <el-radio :label="3">按全院</el-radio>
          </el-radio-group>
          <el-col :span="24" style="marginTop:20px;">
            <FromList :tableData="tableData" :tableTitle="tableTitle"  />
          </el-col>
          <el-col :span="24" class='patient-paging'>
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage3"
                :page-size="500"
                layout="prev, pager, next, jumper"
                :total="1000">
              </el-pagination>
            </div>
          </el-col>
        </el-col>
        <el-col :span="24" v-show='tabs == 2' style="paddingTop:10px;">
          <ViewTitle text="基本信息" />
            <el-col :span="24" class="clinicNurse-text">
              <div>姓名:患者一</div>
              <div>姓别:男</div>
              <div>年龄:18</div>
              <div>出生日期:1985/12/06</div>
              <div>身份证号:651561561561561561516</div>
            </el-col>
            <ViewTitle text="就诊信息" />
            <el-col :span="24" style="marginTop:20px;">
              <el-timeline>
                <el-timeline-item
                  color="#02bf6b"
                  v-for="(activity, index) in activities"
                  :key="index"
                  >
                <div>
                    <p>{{activity.timestamp}}</p>
                  <el-card>
                    <h4>缴纳挂号费</h4>
                    <p>状态: <span style="color:#02bf6b">已缴清</span>  </p>
                  </el-card>
                </div>
                </el-timeline-item>
              </el-timeline>
            </el-col>
        </el-col>
      </el-col>
      <el-col :span="17" class="clinicNurse-right">
        <el-col :span="24" class="clinicNurse-right-tabs">
            <div @click='tabs1 = key' v-for="(item,key) in rightTabs" :key="key" :style="tabs1==key?leftStyle:''">{{item}}</div> 
        </el-col>  
        <el-col :span="24" style="paddingTop:10px">
          <el-col :span="24">
            <el-form :inline="true" class="demo-form-inline" v-model="formInline">
              <el-form-item label="搜索">
                <el-input placeholder="请输入姓名/门诊号/身份证号" v-model="formInline.rightKeyValue">
                  <el-button slot="append" icon="el-icon-search">
                    查询
                  </el-button>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-date-picker
                  v-model="formInline.rightDate"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-select v-model="formInline.doctorValue" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-radio-group v-model="formInline.rightRadio">
                  <el-radio :label="0">长期医嘱</el-radio>
                  <el-radio :label="1">短期医嘱</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-col :span="24" class="info" style="">
                  <div class="info-span">
                    <span class="span"></span>  
                    <div>未校对</div>
                  </div>
                  <div class="info-span">
                    <span class="span"></span>  
                    <div>已校对</div>
                  </div>
                  <div class="info-span">
                    <span class="span"></span>  
                    <div>已扣费</div>
                  </div>
                  <div class="info-span">
                    <span class="span"></span>  
                    <div>已执行</div>
                  </div>
                  <div class="info-span">
                    <span class="span"></span>  
                    <div>已暂停</div>
                  </div>
                  <div class="info-span">
                    <span class="span"></span>  
                    <div>已停止</div>
                  </div>
                  <div class="info-span">
                    <span class="span"></span>  
                    <div>已退费</div>
                  </div>
                  <div class="info-span">
                    <span class="span"></span>  
                    <div>已作废</div>
                  </div>
              </el-col>
            </el-form>
          </el-col>
        </el-col>
        <el-col :span="24">
           <FromList :checkbox="Flagcheckbox" :tableTitle="tableTitle1" @handelChange='handelchange' :tableData='tableData1' />
           <el-col :span="24" style="marginTop:10px;display:flex;">
             <div style="width:30%;">总合计:{{amoutMoney}}  </div>
             <div style="marginLeft:50px;">选中合计:{{checkboxMoney}}</div>
           </el-col>
        </el-col>
        <el-col :span="24" style="paddingTop:20px;">
          <viewTitle text="医嘱计价明细" />
          <FromList :tableTitle="tableTitle1"  :tableData='tableData1' />
        </el-col>
      </el-col>
    </el-col>
  </el-row>
</template>

<script>
let that 
import FromList from "@/forComponents/fromList/fromList"
import TopManu from "@/components/TopMenu"
import ViewTitle from "@/forComponents/viewTitle"
export default {
  name:'clinicNurse',
  data(){
    return {
      leftValue:"", //左边搜索框key
      radio:"",
      formInline:{
        rightDate:"", //右边时间key
        rightKeyValue:"", 
        doctorValue:"",
        rightRadio:0
      },
      options: [{
          value: '0',
          label: '全部'
        }, {
          value: '1',
          label: '草稿'
        }, {
          value: '2',
          label: '提交'
        }, {
          value: '3',
          label: '校对'
        }, {
          value: '4',
          label: '完成'
        },
        {
          value: '5',
          label: '待停止'
        },
        {
          value: '6',
          label: '已停止'
        },
        {
          value: '7',
          label: '已废除'
        }
       ],
      leftStyle:{
        color:"#42b983",
        backgroundColor:"#fff"
      },
      leftTabs:[
        "候诊患者",
        "已诊患者",
        "患者详情"
      ],
      rightTabs:[
        "待校对",
        "待扣费",
        "待执行",
        "待停止",
        "全部医嘱",
      ],
      activities: [
        {
        content: '缴纳挂号费',
        timestamp: '状态:已经缴清',
        },
        {
        content: '缴纳挂号费',
        timestamp: '状态:已经缴清',
        },
      ],
      tabs:1,
      tabs1:1,
      activeName:"3",
      Flagcheckbox:true, //确定表格是否显示多选框
      tableTitle:[
        {
          prop:"number",
          name:"序号",
          type:1,
          width:80,
         },
         {
          prop:"id",
          name:"门诊号",
          type:1,
          width:100,
         },
         {
          prop:"name",
          name:"姓名",
          type:1,
         },
         {
          prop:"idCard",
          name:"身份证号",
          type:1
         },
         {
          prop:"sex",
          name:"性别",
          type:1
         },
         {
          prop:"newDate",
          name:"出生日期",
          type:1
         },
         {
          prop:"age",
          name:"年龄",
          type:1
         },
          {
          prop:"patients",
          name:"患者类型",
          type:1
         },
          {
          prop:"healthcareCoding",
          name:"医疗卡号",
          type:1
         },
        {
          prop:"administrative",
          name:"科室",
          type:1
         },
        {
          prop:"doctor",
          name:"大夫",
          type:1
         },
        {
          prop:"type",
          name:"挂号类型",
          type:1
         },
        {
          prop:"disease",
          name:"病种",
          type:1
         },
         {
          prop:"amount",
          name:"挂号金额",
          type:1
         },
         {
          prop:"registrationTime",
          name:"挂号时间",
          type:1
         }
      ],
      tableTitle1:[
        {
          prop:"number",
          name:"序号",
          type:1,
          width:80,
         },
         {
          prop:"name",
          name:"姓名",
          type:1,
          width:100,
         },
         {
          prop:"newDate",
          name:"开始时间",
          type:1,
         },
         {
          prop:"doctor",
          name:"医嘱内容",
          type:1,
         },
         {
          prop:"specification",
          name:"规格",
          type:1
         },
         {
          prop:"amout",
          name:"总量",
          type:1
         },
         {
          prop:"dosage",
          name:"剂量",
          type:1
         },
         {
          prop:"price",
          name:"计价",
          type:1
         }
      ],
      tableData:[
        
      ],
      tableData1:[
        {
          number:1,
          name:"哈哈哈",
          newDate:"达瓦达瓦",
          doctor:"一天八顿老八特有食品",
          specification:"吨",
          amout:"五吨",
          dosage:"一服",
          price:122
        },
        {
          number:1,
          name:"哈哈哈",
          newDate:"达瓦达瓦",
          doctor:"一天八顿老八特有食品",
          specification:"吨",
          amout:"五吨",
          dosage:"一服",
          price:122
        },
        {
          number:1,
          name:"哈哈哈",
          newDate:"达瓦达瓦",
          doctor:"一天八顿老八特有食品",
          specification:"吨",
          amout:"五吨",
          dosage:"一服",
          price:122
        },
        {
          number:1,
          name:"哈哈哈",
          newDate:"达瓦达瓦",
          doctor:"一天八顿老八特有食品",
          specification:"吨",
          amout:"五吨",
          dosage:"一服",
          price:122
        },
        {
          number:1,
          name:"哈哈哈",
          newDate:"达瓦达瓦",
          doctor:"一天八顿老八特有食品",
          specification:"吨",
          amout:"五吨",
          dosage:"一服",
          price:122
        },
         {
          number:1,
          name:"哈哈哈",
          newDate:"达瓦达瓦",
          doctor:"一天八顿老八特有食品",
          specification:"吨",
          amout:"五吨",
          dosage:"一服",
          price:122
        },
         {
          number:1,
          name:"哈哈哈",
          newDate:"达瓦达瓦",
          doctor:"一天八顿老八特有食品",
          specification:"吨",
          amout:"五吨",
          dosage:"一服",
          price:122
        },
        {
          number:1,
          name:"哈哈哈",
          newDate:"达瓦达瓦",
          doctor:"一天八顿老八特有食品",
          specification:"吨",
          amout:"五吨",
          dosage:"一服",
          price:122
        }
      ],
      currentPage3:0,
      amoutMoney:0, //总价
      checkboxMoney:0 //选中总价
    }
  },
  mounted(){
    that = this
    that.tableData1.map((item,key)=>{
      that.amoutMoney += parseInt(item.price)
    })
     
  },
  methods:{
    handleClick(e){
     console.log(e)
    },
    handleSizeChange(){

    },
    handleCurrentChange(){
      
    },
    handelchange(e){
      let num = 0
      e.map((item)=>{
        num += item.price
      })
      that.checkboxMoney = num
    }
  },
  components:{
     FromList,
     TopManu,
     ViewTitle
  }
}
</script>

<style lang='scss' scoped>
@import "./index.scss";

.el-timeline{
  margin: 0;
  padding: 0;
}


</style>